<template>
  <scroll-view
    show-scrollbar="false"
    scroll-with-animation="true"
    class="scroll-view_H"
    scroll-x="true"
    @scroll="scroll"
    :scroll-left="leftpx"
  >
    <view
      v-for="(item, index) in mapName"
      class="scroll-view-item_H"
      :key="index"
      @click="select(item)"
    >
      <view :class="item.theme_id == selectidAdress ? 'selectname' : 'noselect'">
        {{ item.theme_name }}</view
      >
    </view>
  </scroll-view>
</template>

<script setup>
import { onMounted, ref } from "vue";
const propos = defineProps({
  mapName: {
    type: Array,
    default: () => [],
  },
  selectidAdress: {
    type: Number,
    default: 1,
  },
});
const leftpx = ref();
const emits = defineEmits(["selectAdress"]);
const Autoheight = ref();
onMounted(() => {
  Autoheight.value = "width:" + propos.mapName.length * 20 + "vw";
});
const scrollLeft = (index) => {
  console.log("移动到那里", index);
  if (index % 4 === 0) {
    leftpx.value = (index / 4) * 300;
  } else if (index / 2 == 1) {
    leftpx.value = 0;
  }
};
const select = (id) => {
  console.log("选择的", id);
  emits("selectAdress", id);
};
defineExpose({
  scrollLeft,
});
</script>

<style scoped>
/deep/ ::-webkit-scrollbar {
  display: block;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: auto !important;
  background: transparent;
  overflow: auto !important;
}
.scroll-view-item_H {
  font-family: "仓耳渔阳体 W05";
  display: inline-block;
  margin-left: 5vw;
  text-align: center;
  font-size: 36rpx;
  font-weight: 600;
}

.selectname {
  font-size: 15px;
  color: white;
}

.noselect {
  font-size: 15px;
  color: rgb(170, 170, 170);
  font-weight: 600;
}

.selectMap {
  z-index: 999;
  width: 100vw;
  position: absolute;
  top: 13vh;
  overflow: auto;
}

.scroll-view-item {
  text-align: center;
  font-size: 36rpx;
}

.selectMap::-webkit-scrollbar {
  width: 12px;
  /* 滚动条宽度 */
}

.scroll-view_H {
  z-index: 999;
  width: 100vw;
  position: absolute;
  top: 11vh;
  white-space: nowrap;
  width: 100%;
}
.scroll-view_H::-webkit-scrollbar {
  width: 0 !important; /* 隐藏滚动条宽度 */
  background: transparent; /* 使滚动条透明 */
}

/* 针对 Firefox 浏览器 */
.scroll-view_H {
  scrollbar-width: none; /* 隐藏滚动条 */
}
</style>
